<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Virtual List | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Virtual List | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Virtual List</h1>
          <ul class="docs-index"></ul>
          <p>Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 components which work with lists such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.</p>
          <h2>Virtual List Layout</h2>
          <p>Virtual List HTML layout is pretty simple, it is almost the same as for usual <a href="list-view.html">List View</a> with only difference: you need to leave it empty:</p><pre><code class="html"><span class="token comment">&lt;!-- Virtual List --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list virtual-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token comment">&lt;!-- keep it empty --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code>
          <p>Where:</p>
          <ul>
            <li>
              <p><code>virtual-list</code> - required additional class on any list block that uses Virtual List</p>
            </li>
          </ul>
          <h2>Virtual List App Methods</h2>
          <p>Now, when we have list's HTML, we need to initialize it. We need to use required App method:</p>
          <div class="method-wrap">
            <p><span class="method">app.virtualList.create(<span>parameters</span>)</span><span>- initialize virtual list with parameters</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> - object with virtual list parameters. Required.</li>
              <li class="method-returns">Method returns initialized Virtual List instance</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.virtualList.destroy(<span>el</span>)</span>- destroy Virtual List instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span>. Virtual List element or Virtual List instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.virtualList.get(<span>el</span>)</span>- get Virtual List instance by HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Virtual List element.</li>
            </ul>
            <p class="method-returns">Method returns Virtual List's instance</p>
          </div>
          <div class="important-note">
            <p>Note that Virtual List container (list block element) should be in DOM on a moment of initialization.</p>
          </div>
          <h2>Virtual List Parameters</h2>
          <p>Let's look on list of all available parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>el</td>
                <td>HTMLElement<br>string</td>
                <td></td>
                <td>Target List Block element. In case of <code>string</code> - CSS selector of list block element</td>
              </tr>
              <tr>
                <td>ul</td>
                <td>HTMLElement<br>string</td>
                <td></td>
                <td>List element <code>&lt;ul&gt;</code> inside of List block.</td>
              </tr>
              <tr>
                <td>createUl</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will automatically create <code>&lt;ul&gt;</code> element inside of Virtual List block. If disabled, then virtual list can be used on any block element without <code>ul &gt; li</code> structure</td>
              </tr>
              <tr>
                <td>items</td>
                <td>array</td>
                <td></td>
                <td>Array with list items</td>
              </tr>
              <tr>
                <td>rowsBefore</td>
                <td>number</td>
                <td></td>
                <td>Amount of rows (items) to be rendered before current screen scroll position. By default it is equal to double amount of rows (items) that fit to screen</td>
              </tr>
              <tr>
                <td>rowsAfter</td>
                <td>number</td>
                <td></td>
                <td>Amount of rows (items) to be rendered after current screen scroll position. By default it is equal to the amount of rows (items) that fit to screen</td>
              </tr>
              <tr>
                <td>cols</td>
                <td>number</td>
                <td>1</td>
                <td>Number of items per row. Doesn't compatible when using Virtual List with dynamic height</td>
              </tr>
              <tr>
                <td>height</td>
                <td>number or function(item)</td>
                <td></td>
                <td>If <code>number</code> - list item height in px. If <code>function</code> then function should return item height. By default equals to <code>44</code> for iOS theme and <code>48</code> for MD theme</td>
              </tr>
              <tr>
                <td>itemTemplate</td>
                <td>string<br>function</td>
                <td></td>
                <td>Template7 string template or Template7 compiled template that used to render single item. Template should contain full HTML layout for single item, including wrapping <code>&lt;li&gt;&lt;/li&gt;</code> tags</td>
              </tr>
              <tr>
                <td>renderItem</td>
                <td>function(item)</td>
                <td></td>
                <td>This optional function allows to use custom function to render item HTML. It could be used instead of <b>template</b> parameter</td>
              </tr>
              <tr>
                <td>renderExternal</td>
                <td>function(renderParameters)</td>
                <td></td>
                <td>This optional function allows to render DOM items using some custom method. Useful in case it is used (e.g.) with Vue/React plugin to pass DOM rendering and manipulation to Vue/React. <code>renderParameters</code> conaints object with the following properties: <code>fromIndex</code>, <code>toIndex</code>, <code>listHeight</code>, <code>topPosition</code>, <code>items</code></td>
              </tr>
              <tr>
                <td>emptyTemplate</td>
                <td>string</td>
                <td></td>
                <td>Defines list item template for the case if empty data passed</td>
              </tr>
              <tr>
                <td>dynamicHeightBufferSize</td>
                <td>number</td>
                <td>1</td>
                <td>This parameter allows to control buffer size on Virtual Lists with dynamic height (when <code>height</code> parameter is function) as a buffer size multiplier</td>
              </tr>
              <tr>
                <td>cache</td>
                <td>boolean</td>
                <td>true</td>
                <td>Disable or enable DOM cache for already rendered list items. In this case each item will be rendered only once and all futher manipulations will be with DOM element. It is useful if your list items have some user interaction elements (like form elements or swipe outs) or could be modified</td>
              </tr>
              <tr>
                <td>updatableScroll</td>
                <td>boolean</td>
                <td></td>
                <td>Is the current device updates and handles scroll events during scroll. By default (if not specified) it is "false" for all iOS devices with iOS version less than 8.</td>
              </tr>
              <tr>
                <td>setListHeight</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will set height on list block if enabled</td>
              </tr>
              <tr>
                <td>showFilteredItemsOnly</td>
                <td>boolean</td>
                <td>false</td>
                <td>Option to show filtered items only set by `filter()` method</td>
              </tr>
              <tr>
                <th colspan="4">Searchbar</th>
              </tr>
              <tr>
                <td>searchByItem</td>
                <td>function(query, item, index)</td>
                <td></td>
                <td>Search function that will be used by <a href="searchbar.html">Searchbar</a>, it receives search query, item itself and item index. If item matches to search query you need to return <code>true</code>, otherwise this function should return <code>false</code></td>
              </tr>
              <tr>
                <td>searchAll</td>
                <td>function(query, items)</td>
                <td></td>
                <td>Search function that will be used by <a href="searchbar.html">Searchbar</a>, it receives search query and array with all items. You need to loop through items and return array with indexes of matched items</td>
              </tr>
            </tbody>
          </table>
          <h2>Virtual List Methods & Properties</h2>
          <p>So to create Virtual List we have to call:</p><pre><code class="js"><span class="token keyword">var</span> virtualList <span class="token operator">=</span> app<span class="token punctuation">.</span>virtualList<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/* parameters */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>After we initialize Virtual List we have its initialized instance in variable (like <code>virtualList</code> variable in example above) with helpful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>virtualList.items</td>
                <td>Array with items</td>
              </tr>
              <tr>
                <td>virtualList.filteredItems</td>
                <td>Array with filtered items (after using ".filterItems" method)</td>
              </tr>
              <tr>
                <td>virtualList.domCache</td>
                <td>Object with cached dom items</td>
              </tr>
              <tr>
                <td>virtualList.params</td>
                <td>Parameters passed on list initialization</td>
              </tr>
              <tr>
                <td>virtualList.el</td>
                <td>Virtual list target list block element</td>
              </tr>
              <tr>
                <td>virtualList.$el</td>
                <td>Dom7 instance of target list block element</td>
              </tr>
              <tr>
                <td>virtualList.pageContentEl</td>
                <td>Parent "page-content" element</td>
              </tr>
              <tr>
                <td>virtualList.$pageContentEl</td>
                <td>Dom7 instance of parent "page-content" element</td>
              </tr>
              <tr>
                <td>virtualList.currentFromIndex</td>
                <td>Index number of currently first rendered item</td>
              </tr>
              <tr>
                <td>virtualList.currentToIndex</td>
                <td>Index number of currently last rendered item</td>
              </tr>
              <tr>
                <td>virtualList.reachEnd</td>
                <td>Boolean property. Equals <code>true</code> if the currently last rendered item is the last item of all specified items</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>virtualList.filterItems(<span>indexes</span>);</td>
                <td>Filter virtual list by passing array with indexes of items to show</td>
              </tr>
              <tr>
                <td>virtualList.resetFilter();</td>
                <td>Disable filter and display all items again</td>
              </tr>
              <tr>
                <td>virtualList.appendItem(<span>item</span>);</td>
                <td>Append item to virtual list</td>
              </tr>
              <tr>
                <td>virtualList.appendItems(<span>items</span>);</td>
                <td>Append array with items to virtual list</td>
              </tr>
              <tr>
                <td>virtualList.prependItem(<span>item</span>);</td>
                <td>Prepend item to virtual list</td>
              </tr>
              <tr>
                <td>virtualList.prependItems(<span>items</span>);</td>
                <td>Prepend array with items to virtual list</td>
              </tr>
              <tr>
                <td>virtualList.replaceItem(<span>index, items</span>);</td>
                <td>Replace item at specified index with the new one</td>
              </tr>
              <tr>
                <td>virtualList.replaceAllItems(<span>items</span>);</td>
                <td>Replace all items with arrays of new items</td>
              </tr>
              <tr>
                <td>virtualList.moveItem(<span>oldIndex, newIndex</span>);</td>
                <td>Move virtual item from oldIndex to newIndex</td>
              </tr>
              <tr>
                <td>virtualList.insertItemBefore(<span>index, item</span>);</td>
                <td>Insert new item before item with specified index</td>
              </tr>
              <tr>
                <td>virtualList.deleteItem(<span>index</span>);</td>
                <td>Delete item at specified index</td>
              </tr>
              <tr>
                <td>virtualList.deleteItems(<span>indexes</span>);</td>
                <td>Delete items at specified array of indexes</td>
              </tr>
              <tr>
                <td>virtualList.deleteAllItems();</td>
                <td>Delete all items</td>
              </tr>
              <tr>
                <td>virtualList.clearCache();</td>
                <td>Clear virtual list cached DOM elements</td>
              </tr>
              <tr>
                <td>virtualList.destroy();</td>
                <td>Destory initialized virtual list and detach all events</td>
              </tr>
              <tr>
                <td>virtualList.update();</td>
                <td>Update virtual list, including recalculation of list sizes and re-rendering of virtual list</td>
              </tr>
              <tr>
                <td>virtualList.scrollToItem(index);</td>
                <td>Scroll Virtual List to specified item by its index number</td>
              </tr>
            </tbody>
          </table>
          <h2>Virtual List Events</h2>
          <p>Virtual List will fire the following events on app and virtual list instance:</p>
          <p>Virtual List instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>vl</code>.</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Arguments</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>itemBeforeInsert</td>
                <td>virutalList</td>
                <td rowspan="2"><span>virtualList, itemEl, item</span></td>
                <td rowspan="2">Event will be triggered before item will be added to virtual document fragment</td>
              </tr>
              <tr>
                <td>vlItemBeforeInsert</td>
                <td>app</td>
              </tr>
              <tr>
                <td>itemsBeforeInsert</td>
                <td>virutalList</td>
                <td rowspan="2"><span>virtualList, fragment</span></td>
                <td rowspan="2">Event will be triggered after current DOM list will be removed and before new document will be inserted</td>
              </tr>
              <tr>
                <td>vlItemsBeforeInsert</td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeClear</td>
                <td>virutalList</td>
                <td rowspan="2"><span>virtualList, fragment</span></td>
                <td rowspan="2">Event will be triggered before current DOM list will be removed and replaced with new document fragment</td>
              </tr>
              <tr>
                <td>vlBeforeClear</td>
                <td>app</td>
              </tr>
              <tr>
                <td>itemsAfterInsert</td>
                <td>virutalList</td>
                <td rowspan="2"><span>virtualList, fragment</span></td>
                <td rowspan="2">Event will be triggered after new document fragment with items inserted</td>
              </tr>
              <tr>
                <td>vlItemsAfterInsert</td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/virtual-list.html">Examples</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-inner sliding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Virtual List<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>subnavbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">data-search-container</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.virtual-list<span class="token punctuation">"</span></span> <span class="token attr-name">data-search-item</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>li<span class="token punctuation">"</span></span> <span class="token attr-name">data-search-in</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.item-title<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar searchbar-init<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar-inner<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar-input-wrap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-clear-button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar-disable-button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>searchbar-backdrop<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list simple-list searchbar-not-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Nothing found<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list virtual-list media-list searchbar-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Dummy items array</span>
<span class="token keyword">var</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> <span class="token number">10000</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Item '</span> <span class="token operator">+</span> i<span class="token punctuation">,</span>
    subtitle<span class="token punctuation">:</span> <span class="token string">'Subtitle '</span> <span class="token operator">+</span> i
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> virtualList <span class="token operator">=</span> app<span class="token punctuation">.</span>virtualList<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// List Element</span>
  el<span class="token punctuation">:</span> <span class="token string">'.virtual-list'</span><span class="token punctuation">,</span>
  <span class="token comment">// Pass array with items</span>
  items<span class="token punctuation">:</span> items<span class="token punctuation">,</span>
  <span class="token comment">// Custom search function for searchbar</span>
  <span class="token function-variable function">searchAll</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">query<span class="token punctuation">,</span> items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> found <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword-block">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">if</span> <span class="token punctuation">(</span>items<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>title<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>query<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span> <span class="token operator">||</span> query<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">''</span><span class="token punctuation">)</span> found<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword-block">return</span> found<span class="token punctuation">;</span> <span class="token comment">//return array with mathced indexes</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// List item Template7 template</span>
  itemTemplate<span class="token punctuation">:</span>
    <span class="token string">'&lt;li>'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;a href="#" class="item-link item-content">'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;div class="item-inner">'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;div class="item-title-row">'</span> <span class="token operator">+</span>
            <span class="token string">'&lt;div class="item-title">{{title}}&lt;/div>'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
          <span class="token string">'&lt;div class="item-subtitle">{{subtitle}}&lt;/div>'</span> <span class="token operator">+</span>
        <span class="token string">'&lt;/div>'</span> <span class="token operator">+</span>
      <span class="token string">'&lt;/a>'</span> <span class="token operator">+</span>
    <span class="token string">'&lt;/li>'</span><span class="token punctuation">,</span>
  <span class="token comment">// Item height</span>
  height<span class="token punctuation">:</span> app<span class="token punctuation">.</span>theme <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token number">63</span> <span class="token punctuation">:</span> <span class="token number">73</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>